/**
 * 加载资源
 */

import { ossPath } from '../utils/index';

interface LineProp {
  color?: number;
  width?: number;
}

export default class LoaderScene {
  // static bg: Phaser.GameObjects.Container;

  static loading_text: Phaser.GameObjects.Text;

  static loading_line: Phaser.GameObjects.Graphics;

  static loading_box: Phaser.GameObjects.Graphics;

  static loading_header: Phaser.GameObjects.Image;

  static loading_icon: Phaser.GameObjects.Image;

  static init(_this: Phaser.Scene) {
    // this.bg = createHomeBg(_this);

    this.loading_header = _this.add.image(0, 0, 'loading_header');
    this.loading_header.x = _this.cameras.main.centerX;
    this.loading_header.y = this.loading_header.height;
    this.loading_header.setDepth(101);

    this.loading_text = _this.add.text(0, 0, '0%').setDepth(102);
    this.loading_text.setStyle({ fill: '#5E5018', font: '30px huakang', align: 'center' });
    this.loading_text.y = _this.scale.height - this.loading_text.height - 50;
    this.loading_text.x = _this.cameras.main.centerX - this.loading_text.width / 2;

    this.loading_box = this.loadingLineBox(_this).setDepth(103);

    this.loading_line = this.loadingLine({ color: 0x5e5018 }, _this).setDepth(104);

    this.loading_icon = _this.add.image(0, 0, 'loading_icon').setDepth(105);
    this.loading_icon.x = this.loading_text.x - this.loading_text.width / 2;
    this.loading_icon.y = this.loading_text.y + this.loading_text.height / 2;
    _this.tweens.add({
      targets: this.loading_icon,
      duration: 1000,
      ease: 'Linear',
      repeat: -1,
      props: { angle: 360 },
    });
  }

  static preload(_this: Phaser.Scene, callback: Function) {
    this.loadImg(_this);
    _this.load.audio('bgm', `${ossPath}/audio/bgm.mp3`);
    _this.load.audio('g6', `${ossPath}/audio/g6.mp3`);
    _this.load.audio('g7', `${ossPath}/audio/g7.mp3`);
    _this.load.audio('g16', `${ossPath}/audio/g16.mp3`);
    _this.load.audio('g21', `${ossPath}/audio/g21.mp3`);
    _this.load.audio('g26', `${ossPath}/audio/g26.mp3`);
    _this.load.spritesheet('lantern', './assets/images/g8_icon1.png', { frameWidth: 509, frameHeight: 124 / 2 });

    _this.load.on('progress', (value: number) => {
      const progress = Math.floor(value * 100);
      this.loading_text.text = `${progress}%`;

      this.loading_line.clear();

      const width = (_this.scale.width / 10) * 8;
      const itemW = Math.floor(width * progress) / 100;
      this.loading_line.update(itemW);
    });

    _this.load.once('complete', () => {
      _this.sound.add('bgm', { loop: true, volume: 0.2 });
      _this.sound.add('g6');
      _this.sound.add('g7');
      _this.sound.add('g16');
      _this.sound.add('g21');
      _this.sound.add('g26');
      callback();
    });
  }

  static create(_this: Phaser.Scene, callBack: Function) {
    this.loading_text.destroy();
    this.loading_box.destroy();
    this.loading_line.destroy();
    this.loading_icon.destroy();
    this.loading_header.destroy();
    // this.bg.destroy();
    // _this.scene.start('ConfirmScene');

    if (callBack) callBack();
  }

  static Line(op: LineProp, _this: Phaser.Scene) {
    const ScaleItemWidth = _this.scale.width / 10;
    const W = op.width || ScaleItemWidth * 8;
    const H = 30;
    const R = 15;
    const Y = this.loading_text.y - 60;
    const X = ScaleItemWidth;
    const C = op.color || 0x5e5018;

    const line = _this.add.graphics({
      fillStyle: { color: C, alpha: 1 },
    });
    line.fillRoundedRect(X, Y, W, H, R);
    line.setData({ X, Y, W, H, R });

    return line;
  }

  static loadingLine(op: LineProp, _this: Phaser.Scene) {
    if (this.loading_line) {
      return this.loading_line;
    }

    const line = this.Line(op, _this);
    const [X, Y, H, R] = line.getData(['X', 'Y', 'H', 'R']) as number[];

    line.update = (w: number) => {
      line.fillRoundedRect(X, Y, w < 30 ? 30 : w, H, R);
    };

    return line;
  }

  static loadingLineBox(_this: Phaser.Scene) {
    const line = this.Line({ color: 0xffe062 }, _this);
    const size = 20;
    const [X, Y, W, H, R] = line.getData(['X', 'Y', 'W', 'H', 'R']) as number[];
    line.fillRoundedRect(X - size / 2, Y - size / 2, W + size, H + size, R + size / 2);

    return line;
  }

  static loadImg(_this: Phaser.Scene) {
    const ModuleImg = require.context('../assets/images', true, /\.png/);
    ModuleImg.keys().forEach((m: string) => {
      const s = m.split('/');
      const name = s[s.length - 1];
      _this.load.image(`image-${name.split('.')[0]}`, `./assets/images/${name}`);
    });
  }
}
